<template>
    <div class="cgs" :style="{backgroundImage: `url(${sysInfo.bgImg})`}">
        <div v-if="active === 'register'" class="cgs-container register-container flex-col" style="height: 600px">
            <div class="cgs-container-title flex-col">
                <span class="info1">{{title}}</span>
                <span class="info2">WELCOME&nbsp;TO&nbsp;{{title}}</span>
            </div>
            <div class="cgs-input-div">
                <span class="iconfont cgsIcon-user" />
                <input v-model="userName" @blur="handleInputBlur($event, 'userName')" placeholder="请输入姓名">
                <label><div v-if="userLabel" class="label-span">!</div>{{userLabel}}</label>
            </div>
            <div class="cgs-input-div">
                <span class="iconfont cgsIcon-phone" />
                <input v-model="telephone" @blur="handleInputBlur($event, 'telephone')" placeholder="请输入手机号码">
                <label><div v-if="telephoneLabel" class="label-span">!</div>{{telephoneLabel}}</label>
            </div>
            <div class="cgs-input-div">
                <span class="iconfont cgsIcon-key" />
                <input v-model="safe" @blur="handleInputBlur($event, 'safe')" placeholder="请输入验证码">
                <button :class="buttonCheck" class="input-button" @click="getValidationCode">{{validationCodeText}}</button>
                <label><div v-if="safeLabel" class="label-span">!</div>{{safeLabel}}</label>
            </div>
            <div class="cgs-input-div">
                <span class="iconfont cgsIcon-lock" />
                <input v-model="password" type="password" @blur="handleInputBlur($event, 'password')" placeholder="密码，6-20位">
                <label><div v-if="passwordLabel" class="label-span">!</div>{{passwordLabel}}</label>
            </div>
            <div style="z-index:1">
                <el-button type="primary" :loading="buttonLoading" @click="handleRegister">{{buttonLoadText}}</el-button>
            </div>
            <div class="cgs-container-bottom">
                <span @click="$router.push({path: '/login'})">返回登录</span>
            </div>
            <a class="registration-info" href="http://beian.miit.gov.cn" target="_blank">{{registration}}</a>
        </div>
        <div v-if="active === 'tenant'" class="cgs-container flex-col" style="height: 600px">
            <div class="cgs-container-title flex-col">
                <span class="info1">{{title}}</span>
                <span class="info2">WELCOME&nbsp;TO&nbsp;{{title}}</span>
            </div>
            <div class="tenant-header">
                <span>创建或加入组织</span>
            </div>
            <div class="tenant-card flex-col">
                <el-button class="tenant-join" type="primary" @click="active = 'join'">加入已有组织</el-button>
                <span>如果被告知要使用，或有同事已经在使用，请选择此项</span>
            </div>
            <div class="tenant-card flex-col">
                <el-button class="tenant-create" type="primary" @click="active = 'create'">创建新的组织</el-button>
                <span>如果想为企业或组织创建账号，请选择此项</span>
            </div>
            <div class="tenant-card flex-col">
                <span class="pointer" @click="active = 'register'">返回注册</span>
            </div>
            <a class="registration-info" href="http://beian.miit.gov.cn" target="_blank">{{registration}}</a>
        </div>
        <div v-if="active === 'join'"  class="cgs-container flex-col" style="height: 600px">
            <div class="cgs-container-title flex-col">
                <span class="info1">{{title}}</span>
                <span class="info2">WELCOME&nbsp;TO&nbsp;{{title}}</span>
            </div>
            <div class="tenant-header">
                <span>请输入组织ID</span>
            </div>
            <div class="tenant-card flex-col">
                <input class="join" v-model="tenantId" placeholder="请输入组织ID">
                <span>组织ID可通过管理员获取</span>
            </div>
            <div class="tenant-card flex-col">
                <el-button type="primary" @click="handleJoinTenant">加入</el-button>
            </div>
            <div class="tenant-card flex-col">
                <span class="pointer" @click="active = 'tenant'">返回上一层</span>
            </div>
            <a class="registration-info" href="http://beian.miit.gov.cn" target="_blank">{{registration}}</a>
        </div>
        <div v-if="active === 'create'"  class="cgs-container flex-col" style="height: 600px">
            <div class="cgs-container-title flex-col">
                <span class="info1">{{title}}</span>
                <span class="info2">WELCOME&nbsp;TO&nbsp;{{title}}</span>
            </div>
            <div class="tenant-header">
                <span>创建组织</span>
            </div>
            <div class="tenant-card flex-col">
                <input class="join" v-model="tenantName" placeholder="请输入组织名称">
                <span>您当前账号默认成为组织的管理员</span>
            </div>
            <div class="tenant-card flex-col">
                <el-button type="primary" @click="handleCreateTenant">创建</el-button>
            </div>
            <div class="tenant-card flex-col">
                <span class="pointer" @click="active = 'tenant'">返回上一层</span>
            </div>
            <a class="registration-info" href="http://beian.miit.gov.cn" target="_blank">{{registration}}</a>
        </div>

        <!-- <div class="cgs-bottom flex-row">
            <div class="cgs-bottom-triangle">
                <div class="cgs-bottom-down"></div>
                <div class="cgs-bottom-up"></div>
            </div>
        </div> -->
    </div>

</template>
<script>
    // import userRegister from "./userRegister";

  import {Message} from "element-ui";
    import {setHeadPic, setTenantInfo, setToken, setUserAuthority, setUserInfo} from "../../util/auth";

    import {getPhoneValidationCode, joinTenant, checkValidationCode, createTenant, CheckByUsername} from "@/api/user";
    import {checkPhone} from "../../util/util";
    export default {
    name: "register",
    components: {
        // userRegister,
      // thirdLogin,
    },
    data() {
      return {
          active: "register",
          tenantId: '',
          tenantName: '',
          userName: "",
          password: "",
          telephone: "",
          safe: "",
          safeLabel: "",
          userLabel: "",
          passwordLabel: "",
          telephoneLabel: "",
          buttonCheck: "",
          buttonLoading: false,
          validationCodeLoading: false,
          validationCodeText: "获取验证码",
          buttonLoadText: "注册"
      };
    },
    computed: {
        title() {
            return this.$store.state.sysInfo.name.toUpperCase()
        },
        sysInfo () {
            return this.$store.getters.sysInfo
        },
        registration(){
            return this.$store.state.sysInfo.domainRegistrationInfo
        }
    },
    props: [],
    methods: {
        handleInputBlur (e, type, action) {
            let value = e;
            if (!action) {
                value = e.target.value
            }
            value = value.trim();
            let flag = true;
            switch (type) {
                case "userName":
                    if (value === "" || !value) {
                        this.userLabel = "请输入姓名！"
                        flag = false;
                    } else {
                        this.userLabel = ""
                    }
                    break;
                case "telephone":
                    if (value === "" || !value) {
                        this.telephoneLabel = "请输入手机号码！"
                        flag = false;
                    } else if (!checkPhone(value)) {
                        this.telephoneLabel = "请输入正确的手机号码！"
                        flag = false;
                    } else {
                        CheckByUsername({
                            username: value
                        }).then(res => {
                            if (res.data.data.isExist) {
                                this.telephoneLabel = "用户已存在！"
                                flag = false;
                            } else {
                                this.telephoneLabel = ""
                            }
                        })
                    }
                    break;
                case "safe":
                    if (value === "" || !value) {
                        this.safeLabel = "请输入验证码！"
                        flag = false;
                    } else {
                        this.safeLabel = ""
                    }
                    break;
                case "password":
                    if (value === "" || !value) {
                        this.passwordLabel = "请输入密码！"
                        flag = false;
                    } else if (value.length < 6) {
                        this.passwordLabel = "密码少于6位！"
                    } else if (value.length > 20) {
                        this.passwordLabel = "密码大于20位！"
                    } else {
                        this.passwordLabel = ""
                    }
                    break;
            }
            return flag;
        },
        handleRegister () {
            let flagUser = this.handleInputBlur(this.userName, 'userName', true);
            let flagPassword = this.handleInputBlur(this.password, 'password', true);
            let flagSafe = this.handleInputBlur(this.safe, 'safe', true);
            let flagTelephone = this.handleInputBlur(this.telephone, 'telephone', true);
            if (flagUser && flagPassword && flagSafe && flagTelephone) {
                this.buttonLoading = true;
                this.buttonLoadText = "注册中...";

                checkValidationCode({
                    phoneNumber: this.telephone,
                    validationCode: this.safe
                }).then(res => {
                    if(res.data.success) {
                        this.active = "tenant"
                    } else {
                        this.$message.error(res.data.msg)
                    }
                    this.buttonLoading = false
                    this.buttonLoadText = "注册"
                })
            }
        },
        getValidationCode() {
            if (this.validationCodeLoading) {
                return;
            }
            let phone = this.telephone
            if (!checkPhone(phone)) {
                this.telephoneLabel = "请输入正确的手机号！"
                return;
            }
            this.buttonCheck = 'check';
            CheckByUsername({
                username: phone
            }).then(res => {
                if (res.data.data.isExist) {
                    this.telephoneLabel = "用户已存在！"
                } else {
                    //获取验证码
                    getPhoneValidationCode({
                        phoneNumber: phone
                    })

                    this.validationCodeLoading = true;
                    let time = 60;
                    this.reGetValidationCode(time, null)
                    let timeOut = setInterval(() => {
                        --time
                        this.reGetValidationCode(time, timeOut)
                    },1000);
                }
            })
        },
        reGetValidationCode(time, timeOut) {
            this.validationCodeText = time + "s";
            if (time === 0) {
                clearInterval(timeOut)
                this.buttonCheck = '';
                this.validationCodeText = "重新获取"
                this.validationCodeLoading = false
            }
        },
        handleJoinTenant() {
            let {telephone, userName, safe, password, tenantId} = this
            joinTenant({
                "nickName": userName,
                "phoneNumber": telephone,
                "password": password,
                "type": 1,
                "tenantId": tenantId,
                "validationCode": safe
            }).then(res => {
                if (res.data.success) {
                    this.$message.success("注册成功，请登录！")
                    this.$router.push({path: "/login"});
                } else {
                    this.$message.error(res.data.msg);
                }
            })
        },
        handleCreateTenant() {
            let {telephone, userName, safe, password, tenantName} = this
            createTenant({
                "nickName": userName,
                "phoneNumber": telephone,
                "password": password,
                "type": 0,
                "tenantName": tenantName,
                "validationCode": safe
            }).then(res => {
                if (res.data.success) {
                    this.$message.success("注册成功，请登录！")
                    this.$router.push({path: "/login"});
                } else {
                    this.$message.error(res.data.msg);
                }
            })
        }
    }
  };
</script>

<style src="../login/index.css"></style>
<style src="./index.css"></style>
